//-----------------------------------------------------
// header scss
// 提供所有头部样式
//-----------------------------------------------------

// header样式

@mixin header(
	$height
){
	position:fixed;
	top: 0;
	left: 0;
	width: 100%;
	@include  block-height($height);
	background:$colorWhite;
	color:#000;
	font-size:$navFontsize;
	text-align:center;
	border-bottom: 1px solid $borderColor;
	z-index:10000;
	.logo{
		position: absolute;
		top: 50%;
		left: 13px;
		width: 100%;
		height: 38px;
		margin-top:-19px; 
		img{
			display: block;
			height: 38px;
		}

	}
	// 左侧
	@at-root a.header-left{
		@extend %absolute;
		padding: 0 6px;
		height: $navHeight;
		overflow: hidden;
		left: $fs22;
		top: 0;
		color: $colorWhite;
		&.arrow-white{
			&:before{
				content: '';
				@include arrow(45deg,10px,#fff);

			}
		}
		&:before{
			content: '';
			@include arrow(45deg,10px,#333);

		}
	}
	// 中间
	@at-root .header-middle{
		width:100%;
        height: $navHeight;
        display:inline-block;
        overflow: hidden;
        font-size: $fs36;
        a{
        	float: right;
        	padding-right:15px;
        	font-size: $fs30;
        	color:$colorWhite;
        	font-weight: 600;
        }
        span{
        	font-size: $fs36;
	        height: 32px;
	        line-height: 32px;
	        color: $colorWhite;
	        margin-left: 0.133333rem;
	        overflow: hidden;
        }
        img{
            width: 58px;
            height: 25px;
        }
	}
	// 搜索
	@at-root .header-middle_search{
		width:100%;
        display:inline-block;
        overflow: hidden;
		@include search-input();
	}
	// 右侧
	@at-root .header-right{
		position: absolute;
		top: 0;
		right: 0;
		width: 40%;
		height: $navHeight;
        overflow: hidden;
        a{
        	color:$gray-dark;
        	text-decoration: none;
        	&:hover{
        		text-decoration: none;
        	}
        }
        .header-right_icon{
			@extend %absolute;
	        right:$fs22;
	        top:0;
	        color:$colorWhite;
	        span{
	        	position: relative;
	        	float: left;
	        	padding:0 6px;
	        	&.message{
	        		img{
	        			width: 18px;
	        			height: 14px;
	        		}
	        		.prompt{
		        		@extend %absolute;
		        		top: 16px;
		        		right: 2px;
		        		width:7px;
		        		height: 7px;
		        		background:#FF0036;
		        		border-radius:50%;
		        	}
	        	}
	        	img{
	        		width: 18px;
	        		height: 18px;
	        	}
	        }
	        &:first-child{
	        	.prompt{
	        		@extend %absolute;
	        		top: 10px;
	        		right: 0;
	        		width:10px;
	        		height: 10px;
	        		background:#FF0036;
	        		border-radius:50%;
	        	}
	        }
	        &:last-child{
	        	img{
	        		margin-left: 18px;
	        	}
	        }
        }
	}
}